<template>
  <a-modal
    :visible="visible"
    title="执行预警"
    @ok="handleOk"
    :destroyOnClose="true"
    :maskClosable="false"
    width="630px"
    @cancel="onCancel"
  >
    <a-radio-group v-model:value="radioValue" @change="radioChange">
      <a-radio :style="radioStyle" :value="1">全量数据</a-radio>
      <a-radio :style="radioStyle" :value="2">
        <a-date-picker
          v-model:value="datePickerVal"
          valueFormat="YYYY-MM-DD"
          :disabled-date="disabledDate"
          :disabled="radioValue === 1"
        />
        至今日的数据
      </a-radio>
    </a-radio-group>

    <template #footer>
      <a-button key="back" @click="onCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="confirmLoading" @click="handleOk">
        确定
      </a-button>
    </template>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive, watch, PropType } from 'vue';
import { ruleItemState } from '../../js/typing';
import { useStore } from 'vuex';
import { yjSchedule, queryScheduleStatus } from '@/api/magic-cube/model-list';
import { cloneDeep } from 'lodash';
import moment, { Moment } from 'moment';

export default defineComponent({
  props: {
    models: {
      type: String,
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['commit', 'update:visible', 'stateUpdate'],
  setup(props, { emit }) {
    const store = useStore();
    const radioStyle = reactive({
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    });
    const radioValue = ref(1);
    const datePickerVal = ref('');
    const confirmLoading = ref(false);
    const disabledDate = (current: Moment) => {
      return current && current > moment().endOf('day');
    };
    // 获取任务状态
    const getScheduleStatus = id => {
      const params = { id };
      queryScheduleStatus(params)
        .then(res => {
          if (res) {
            emit('stateUpdate', !res.state);
          }
        })
        .catch(err => {
          console.log('err', err);
        });
    };
    // 执行预警
    const yjScheduleRequest = callback => {
      const currentTime = moment().format('YYYY-MM-DD');
      const params = {
        models: props.models, //模型ID（多选时逗号分隔） //N |
        startTime: datePickerVal.value, //开始时间 | N |
        endTime: currentTime, // 结束时间 | N |
      };
      confirmLoading.value = true;
      yjSchedule(params)
        .then(res => {
          if (res) {
            callback && callback();
            getScheduleStatus(res.data);
          }
        })
        .catch(err => {
          console.log('预警err', err);
        })
        .finally(() => {
          confirmLoading.value = false;
        });
    };
    const radioChange = ({ target }) => {
      const { value } = target;
      if (value === 1) datePickerVal.value = '';
    };
    const handleOk = () => {
      yjScheduleRequest(() => {
        emit('commit');
      });
    };
    const onCancel = () => {
      emit('update:visible', false);
    };

    onMounted(() => {});

    watch(
      () => props.visible,
      () => {
        // Object.keys(props.rule as ruleItemState).forEach(
        //   k => (ruleData[k] = (props.rule as ruleItemState)[k]),
        // );
      },
      {
        deep: true,
      },
    );
    return {
      handleOk,
      onCancel,
      radioStyle,
      radioValue,
      datePickerVal,
      radioChange,
      disabledDate,
      confirmLoading,
    };
  },
});
</script>

<style scoped lang="less">
.set-rule-modal {
  .rule-item-title {
    .type-style {
      display: inline-block;
      color: #b9c4dd;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .type-style + .type-style {
      margin-left: 20px;
    }
  }
  :deep(.ant-input-number) {
    width: 65px;
  }
  .rule-item-content {
    padding-top: 15px;
    .rule-item_level {
      padding-right: 8px;
    }
    .red-style {
      color: #ff1b3f;
    }
    .orange-style {
      color: #ff6f1c;
    }
    .yellow-style {
      color: #ecd60d;
    }
    .blue-style {
      color: #1cdaff;
    }
    .color-style + .color-style {
      margin-left: 10px;
    }
  }
}
.rule-err-msg {
  float: left;
  height: 32px;
  padding: 0 15px;
  padding-right: 160px;
  color: #eb9797;
  font-weight: 400;
  font-size: 14px;
  line-height: 32px;
}
</style>
